<template>
	<vCommonPage type="1" :typeChose="$route.query.code == 'mzyy' ? '0':'0'" :title="$route.query.code == 'mzyy' ? '门诊预约':'门诊挂号'"
		:mzlx="$route.query.code == 'mzyy' ? '3':'0'">
		<div slot="customContent" class="tabPane">
			<div class="choseItemBox speH" v-loading.fullscreen.lock="fullscreenLoading">
				<div :class="departmentList[index].isClick? 'Item click':'Item'"
					v-for="(item,index) in departmentList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
					v-bind:key="'xz'+index" @click="clickItem(index,item)">
					<div :class="departmentList[index].isClick? 'ItemText click':'ItemText'">
						{{item.deptName}}
					</div>
				</div>

				<!-- 				<div class="choseKsItem"
					v-for="(item,index) in departmentList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
					>
					<img class="ksImg"  src="../../assets/images/mzyy/ksItem.png" />
					<div class="emText">
						{{item.deptName}}
					</div>
				</div> -->

			</div>
			<div class="bottomBox" style="justify-content: space-between;">
				<div>
				<el-button type="primary" class="BtnTextHome" @click="goBack()">返回</el-button>
				<el-button type="primary" class="BtnTextHome" @click="goBackHome()">首页</el-button>
				</div>
				<div style="display: flex; align-items: center;">
				<el-button type="primary" v-show="totalPage>1" :class="totalPage == 1 ? 'huiBottom upPage':'blueBottom upPage'"
					@click="prePage()">
					上一页
				</el-button>
				<div class="pageBox" v-show="totalPage>1">
					<div class="curentPage">{{currentPage}}</div>
					/
					<div class="totalPage">{{totalPage}}</div>
				</div>
				<el-button type="primary" v-show="totalPage>1" :class="totalPage == 1 ? 'huiBottom downPage':'blueBottom downPage'"
					@click="nextPage()">
					下一页
				</el-button>
				
				</div>
			</div>
		</div>
	</vCommonPage>
</template>
<script>
	import {
		getDepartment
	} from "@api/apiBox/mzyyAndMzgh"
	import {
		changeChineToDate,
		fun_date
	} from "../../assets/js/getTime.js"
	import {
		registerSource
	} from "@api/apiBox/mzyyAndMzgh"
	export default {
		name: "mzgh",
		data() {
			return {
				fullscreenLoading: false,
				currentPage: 1, //初始页
				pagesize: 9, //    每页的数据
				departmentList: [],
				totalPage: 0
			};
		},
		methods: {
			prePage() {
				if (this.currentPage > 1) {
					this.currentPage--;
				}
			},
			nextPage() {
				if (this.currentPage < this.totalPage) {
					this.currentPage++;
				}
			},
			ReckonTime() {},
			//点击门诊科室
			async clickItem(index, item) {
				this.$store.dispatch("appointment/updateDepartment", item); // 科室信息
				//如果是智能导诊
				if (this.$store.state.zndz.ksInfo.deptId || this.$store.state.yyjj.deptId) {
				} else {
					this.clearClick();
					//将科室信息存入缓存
					this.departmentList[index].isClick = true;
				}
				//如果是挂号选择普通号 就去查询号源价格
				if (this.$route.query.code == 'mzgh' && this.$route.query.mzlx == 0) {
					var data = {
						data: {
							hospId: this.$store.state.terminfo.hospId, //医院ID
							beginDate: changeChineToDate(new Date(), 'YYYY-MM-DD'),
							endDate: changeChineToDate(new Date(), 'YYYY-MM-DD'),
							deptId: item.deptId
						},
						that: this
					}
					const res = await registerSource(data);
					if (res.data.length > 0) {
						let itemData = res.data[0];
						console.log('saveRegInfo', itemData)
						itemData.regFee = itemData.fee;
						let doctor = this.$store.state.appointment.doctor;
						doctor.regFee = itemData.fee;
						this.$store.dispatch("appointment/updateDoctor", doctor); // 更新医生信息 - 挂号费
				
						this.$store.dispatch("appointment/updateRegInfo", itemData); // 日期信息
						//将日期存缓存中
						this.$store.dispatch("appointment/updateDate", changeChineToDate(new Date(),
							'YYYY-MM-DD')); //挂号日期
					}
				}
				this.openFullScreen();
			},
			clearClick() {
				let list = this.departmentList;
				for (let item of list) {
					item.isClick = false;
				}
				this.departmentList = list;
			},
			//3 mzyy 0 mzgh
			openFullScreen() {
				let code = this.$route.query.code;
				//typeChose 第几个模块
				if (code == 'mzyy') {
					this.$router.push({
						name: "mzyyXzys",
						query: {
							code: code,
							mzlx: '3',
							typeChose: '1',
							type : '1'
						},
					})
				}
				if (code == 'mzgh') {
					this.$router.push({
						name: "mzyyXzys",
						query: {
							code: this.$route.query.code,
							mzlx: '0',
							typeChose: '1',
							type : '1'
						},
					})
				}
			},
			//获取科室信息
			async initData() {

				let code = this.$route.query.code;
				let deptId = "";
				if (this.$store.state.zndz.ksInfo.deptId) {
					deptId = this.$store.state.zndz.ksInfo.deptId;
				}
				if (this.$store.state.yyjj.deptId) {
					deptId = this.$store.state.yyjj.deptId;
				}
				console.log(this.$store.state.zndz.ksInfo.deptId, '科室信息1')
				let data = {
					data: {
						hospId: this.$store.state.terminfo.hospId, //医院ID
						beginDate: '',
						endDate: '',
						deptId: deptId //诊室ID
					},
					that: this
				}
				if (code == 'mzyy') {
					data.data.beginDate = changeChineToDate(new Date(), 'YYYY-MM-DD');
					data.data.endDate = fun_date(7);
				} else if (code == 'mzgh') {
					data.data.beginDate = changeChineToDate(new Date(), 'YYYY-MM-DD');
					data.data.endDate = changeChineToDate(new Date(), 'YYYY-MM-DD');
				}
				const res = await getDepartment(data);
				console.log(res, '科室信息2')
				if (res) {
					let list = res.data;
					this.totalPage = parseInt((list.length + this.pagesize - 1) / this.pagesize)
					//如果科室ID部位空则用户已经进行了智能问诊
					if (deptId) {
						this.clickItem(0, list[0]);
					} else {
						this.departmentList = list;
					}
				}
			}
		},
		computed: {},
		components: {},
		mounted() {},
		created() {
			if (this.$route.query.code == 'mzgh') {
				this.$store.dispatch("appointment/updateDate", changeChineToDate(new Date(), 'YYYY-MM-DD')); //预约日期
			}
			this.initData();
		}
	};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import "../../assets/css/mzghYy/xzks.scss";

	.tabPane {
		width: 100%;
		height: 100%;
		// padding-top: 40px;	
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	@media (min-height: 0px) and (max-height: 1910px) {
		.speH {
			height: 38.4375rem;
		}
	}
	@media (min-height: 1919px) {
		.speH {
			height: 500px;
		}
	}
</style>
